<template>
    <div class="content-wrapper" v-loading.fullscreen.lock="fullscreenLoading">
        <el-row class="content-row">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="广告位置" prop="spaceId">
                            <el-select v-model="addForm.spaceId" filterable clearable placeholder='请选择广告位置' >
                                <el-option
                                        v-for="item in spaces"
                                        :key="item.spaceId"
                                        :label="item.name"
                                        :value="item.spaceId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="广告主题" prop="title">
                            <el-input v-model="addForm.title" style="width:52%;"></el-input>
                        </el-form-item>
                        <el-form-item label="上架时间" prop="time">
                            <el-date-picker
                                    v-model="addForm.time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="广告上架时间"
                                    end-placeholder="广告下架时间"
                                    :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="广告排序" prop="sort">
                            <el-input v-model="addForm.sort" style="width:52%;"></el-input>
                        </el-form-item>
                        <el-form-item label="投放城市" prop="cityName">
                            <el-input v-model="addForm.cityName" @focus="viewCity" style="width:52%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="广告样式" prop='style'>
                        <el-col :span="3" v-for="item,index in imageStyle" :key="item.name" :offset="index > 0 ? 1 : 0">
                            <el-card :body-style="{ padding: '0px' }">
                                <img :src="item.url" style="width: 100%" class="image">
                                <div class="bottom">
                                    <el-radio-group v-model="addForm.style">
                                        <el-radio :label="item.code" @change="changeStyle">{{item.name}}</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-card>
                        </el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="子广告信息" prop='detailList'>
                        <!--一图-->
                        <el-col :span="6" v-if="addForm.style === '1'">
                          <span style='cursor:pointer' @click='showSubEdit(null,0)'>
                            <img :src="imageList[0]" width="80%" height="120px" class="image">
                          </span>
                        </el-col>
                        <!--二图-->
                        <el-col :span="6" v-if="addForm.style === '2'">
                            <el-row>
                                <div class="imageFloatLeft">
                                  <span style='cursor:pointer' @click='showSubEdit(null,0)'>
                                    <img :src="imageList[0]" width="100%" height="100%" class="image">
                                  </span>
                                </div>
                                <div class="imageFloatLeft">
                                    <span style='cursor:pointer' @click='showSubEdit(null,1)'>
                                        <img :src="imageList[1]" width="100%" height="100%" class="image">
                                    </span>
                                </div>
                            </el-row>
                        </el-col>
                        <!--三图-->
                        <el-col :span="6" v-if="addForm.style === '3'">
                            <el-row>
                                <div>
                                  <span style='cursor:pointer' @click='showSubEdit(null,0)'>
                                    <img :src="imageList[0]" width="80%" height="70px" class="image">
                                  </span>
                                </div>
                                <div>
                                    <span style='cursor:pointer' @click='showSubEdit(null,1)'>
                                        <img :src="imageList[1]" width="40%" height="70px" class="image">
                                    </span>
                                    <span style='cursor:pointer' @click='showSubEdit(null,2)'>
                                        <img :src="imageList[2]" width="40%" height="70px" class="image">
                                    </span>
                                </div>
                            </el-row>
                        </el-col>
                        <!--四图-->
                        <el-col :span="6" v-if="addForm.style === '4'">
                            <el-row>
                                <div class="imageFloatLeft">
                                  <span style='cursor:pointer' @click='showSubEdit(null,0)'>
                                    <img :src="imageList[0]" width="100%" height="50%" class="image">
                                  </span>
                                  <span style='cursor:pointer' @click='showSubEdit(null,1)'>
                                    <img :src="imageList[1]" width="100%" height="50%" class="image">
                                  </span>
                                </div>
                                <div class="imageFloatLeft">
                                      <span style='cursor:pointer' @click='showSubEdit(null,2)'>
                                        <img :src="imageList[2]" width="100%" height="50%" class="image">
                                      </span>
                                      <span style='cursor:pointer' @click='showSubEdit(null,3)'>
                                        <img :src="imageList[3]" width="100%" height="50%" class="image">
                                      </span>
                                </div>
                            </el-row>
                        </el-col>

                        <el-col :span="16">
                            <el-table :data="tableData"
                                      style="width: 100%"
                                      size="mini"
                                      stripe
                                      border
                                      :header-cell-style="{height:'10'}">
                                <el-table-column type="index" width="50" label="序号" />
                                <el-table-column prop="type" label="广告类型">
                                    <template slot-scope="scope" >
                                        <span v-if="scope.row.type == '0'">公众号推文</span>
                                        <span v-if="scope.row.type == '1'">小程序内页面</span>
                                        <span v-if="scope.row.type == '2'">宣传图</span>
                                        <span v-if="scope.row.type == '3'">小程序</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="adPicture" label="广告图片">
                                    <template slot-scope="scope" >
                                        <img v-if="scope.row.adPicture" :src="origin+'/'+scope.row.adPicture" width="30" height="20" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="url" label="广告链接"/>
                                <el-table-column prop="propagandaPicture" label="宣传图片">
                                    <template slot-scope="scope" >
                                        <img v-if="scope.row.propagandaPicture" :src="origin+'/'+scope.row.propagandaPicture" width="30" height="20" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="appId" label="appId">
                                    <template slot-scope="scope" >
                                        <span v-if="scope.row.appId">{{scope.row.appId}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="{row,$index}">
                                        <el-button type="text" size="small" @click="showSubEdit(row,$index)"> 编辑</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-row>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeTab">取 消</el-button>
            <el-button type="primary" @click="saveForm('addForm',0)">保存</el-button>
            <el-button type="primary" @click="saveForm('addForm',1)">发布</el-button>
        </div>

        <CityTree v-if='viewdialog' v-on:handleclose='viewinf'></CityTree>
        <subBannerDeatil v-if='openDialog' v-on:handleclose='subBannerDone' v-bind:editData='editRow' v-bind:index='editIndex'/>
    </div>
</template>

<script>
import { addAdvertise } from '../../../../api/advertise/advertise'
import { getMoreSpace } from '../../../../api/advertise/advertiseSpace'
import subBannerDeatil from './AdvertiseDetailSub'
import CityTree from '../../../common/CityTree'


export default {
    name: 'advertiseAdd',
    data() {
        return {
            tableData:[],
            editIndex: '',
            editRow: {},
            spaces:[],
            openDialog:false,
            viewdialog: false,
            fullscreenLoading:false,
            image06: require("../../../../assets/img/06.png"),
            imageList: [],
            uploadUrl:'https://lht.ah-zk.com/qjt/fs/file/upload',
            origin:'https://lht.ah-zk.com/qjt/fs/origin',
            imageStyle: [
                {
                    code: "1",
                    name: "单图",
                    url: require("../../../../assets/img/01.png")
                }, {
                    code: "2",
                    name: "双图",
                    url: require("../../../../assets/img/02.png")
                }, {
                    code: "3",
                    name: "三图",
                    url: require("../../../../assets/img/03.png")
                }, {
                    code: "4",
                    name: "四图",
                    url: require("../../../../assets/img/04.png")
                }
            ],
            addForm:{
                spaceId:'',
                cityName:'全国',
                time:[],
                cityList:[],
                detailList: [],
                title:'',
                style:'1',
                sort:'1',
                scope:'1',
            },
            addRules: {
                title: [
                    { required: true, message: '请输入广告主题', trigger: ['blur','change'] }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: ['blur','change'] }
                ],
                spaceId:[
                    { required: true, message: '请选择广告位置', trigger: ['blur','change'] }
                ],
                cityName: [
                    { required: true, message: '请选择发布城市', trigger: ['blur','change'] }
                ],
                detailList: [
                    { required: true, message: '子广告不能为空', trigger: 'blur'}
                ],
                time: [
                    { required: true, message: '上架时间不能为空', trigger: ['blur','change'] }
                ]
            }
        };
    },
    created() {
        this.changeStyle();
        this.getMoreSpace();
    },
    components:{
        subBannerDeatil,
        CityTree
    },
    methods: {
        //关闭tab
        closeTab(){
            this.closeTagByName('forumnAdvertiseAdd');
        },
        //跳转到选择项目弹出框
        viewCity(){
            this.viewdialog=true;
        },
        //选择项目后的回调
        viewinf(e){
            this.viewdialog=false;
            this.addForm.cityList = e;
            let cityNames = "";
            if(e.length!=0){
                for(let i=0;i<e.length;i++){
                    if(i!=0){
                        cityNames+=",";
                    }
                    cityNames+=e[i].cityName;
                }
            }
            this.addForm.cityName=cityNames;
            this.addForm.scope = '2';
        },
        /**
         * 获取坑位
         */
        getMoreSpace(){
            getMoreSpace({type:2,category:1}).then(res=>{
                this.spaces = res.data;
            })
        },
        //添加编辑广告
        showSubEdit(row, index) {
            this.editIndex = index;
            if (row) {
                this.editRow = row;
            } else {
                this.editRow = this.tableData[index];
            }
            this.openDialog = true;
        },
        //改变广告样式的时候
        changeStyle() {
            let tableDatabackUp=[].concat(this.tableData);
            this.tableData=[];
            this.imageList = [];
            for (let i = 0; i < (this.addForm.style - 0); i++) {
                if(tableDatabackUp.length>i&&tableDatabackUp[i].adPicture!==''){
                    this.tableData.push(tableDatabackUp[i]);
                    this.imageList.push(this.origin+"/"+tableDatabackUp[i].adPicture);
                }else {
                    let data = {adPicture: "", propagandaPicture: "", appId: "", type: "", url: ''};
                    data.sort = i + 1;
                    this.tableData.push(data);
                    if (this.addForm.style === '2') {
                        this.imageList.push(this.image06);
                    } else if (this.addForm.style === '3') {
                        this.imageList.push(this.imageStyle[0].url);
                    } else {
                        this.imageList.push(this.imageStyle[0].url);
                    }
                }
            }
        },
        //新增广告弹窗的回调
        subBannerDone(data, index) {
            this.openDialog = false;
            this.tableData[(index - 0)] = data;
            this.imageList[(index - 0)] = this.origin +"/"+data.adPicture;
        },
        //提交保存
        saveForm(formName, status) {
            this.addForm.detailList = this.tableData;
            if (this.tableData) {
                this.addForm.detailList.forEach($image => {
                    if ($image.adPicture === '' && !$image.adPicture) {
                        this.addForm.detailList = [];
                    }
                })
            }
            console.log("form:",this.addForm);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fullscreenLoading=true;
                    this.addForm.startTime= new Date(this.addForm.time[0]).getTime();
                    this.addForm.endTime = new Date(this.addForm.time[1]).getTime();
                    this.addForm.status = status;
                    addAdvertise(this.addForm).then(res => {
                        if (res.code == '0') {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.resetForm('addForm');
                            this.closeTagByName('forumnAdvertiseAdd');
                            this.$router.push('/bbs/advertise/general/list');
                        }
                        else {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
};
</script>

<style scoped>

.content-wrapper{
    height:100%;
    overflow-y: scroll;
}

.content-row{
    height: 94%;
    overflow-y: scroll;
}

.imageFloatLeft {
    width: 40%;
    float: left;
    height: 140px;
    margin-right: 2%;
}

.dialog-footer{
    text-align: center;
}
</style>
